import Vue from 'vue'
import Element from 'element-ui'
import App from '@/App'
import i18n from '@/i18n'
import _ from 'lodash'
import VueVirtualScroller from 'vue-virtual-scroller'
import PortalVue from 'portal-vue'
import VJsoneditor from 'v-jsoneditor'
import VueQuillEditor from 'vue-quill-editor'
import '@/assets/scss/theme.css'
import '@/icons'
import '@/element-ui/theme/index.css'
import '@/assets/scss/aui.scss'
import '@/lib/form-making-advanced/FormMaking.css'
import '@/theme/index.scss'


import router from '@/components/storybook/router'
import '@/components/storybook/utilties/permission'
import store from '@/store'

import http from '@/utils/request'
import renRadioGroup from '@/components/ren-radio-group'
import renSelect from '@/components/ren-select'
import renSelectMultiple from '@/components/ren-select-multiple'
import SelectClientId from '@/components/select-client-id'
import ShareLinkDialog from '@/components/share-link-dialog'
import LinkedBot from '@/components/linked-bot'
import LinkedDataset from '@/components/linked-dataset'
import renProcessMultiple from '@/components/ren-process-multiple'
import renProcessStart from '@/components/ren-process-start'
import renProcessRunning from '@/components/ren-process-running'
import renProcessDetail from '@/components/ren-process-detail'
import renDeptTree from '@/components/ren-dept-tree'
import renRegionTree from '@/components/ren-region-tree'
import EllipsisVessel, {
  EllipsisVesselHeight
} from '@/components/ellipsis-vessel'
import SelectTeamId from '@/components/select-team-id'

import Empty from '@/components/empty'
import SelectClientUserInfo from '@/components/select-client-user-info'
import { hasPermission, getDictLabel, hasPermissionRouterName } from '@/utils'
import { apiInterface } from '@/api'

import '@/api/modules/date/date'
import alertMessage from '@/utils/alertMessage'

import { discussion, categories } from './api/modules/discourse/index'
import CuiDialog from './components/dialog/index'

import GadgetTitle from '@/components/gadget-title'
import CustomComponent from '@/components/form-making-component/select-search/index'
import CustomAllComponent from '@/components/form-making-component/select-all-store-search/index'
import CustomSignaturePad from '@/components/form-making-component/signature-pad/index'
import CustomImageUpload from '@/components/form-making-component/image-upload/index'
import PayProvider from '@/components/storybook/s-pay/pay-provider'
import bus from '@/components/storybook/utilties/bus'
import { getQuery,showErrorWithAssetList } from '@/utils/common'
import ElementResizeDetectorMaker from "element-resize-detector"
import * as filters from '@/filters'
import FormMaking from '@/lib/form-making-advanced/FormMaking.common'
import VueSignaturePad from "vue-signature-pad";
Vue.use(VueSignaturePad);
Vue.prototype.$erd = ElementResizeDetectorMaker()
Vue.component('cui-dialog', CuiDialog)


Vue.use(GadgetTitle)
Vue.config.productionTip = false
Vue.prototype.$discussion = {
  discussion,
  categories
}

Vue.use(renRadioGroup)
Vue.use(renSelect)
Vue.use(renSelectMultiple)
Vue.use(SelectClientId)
Vue.use(ShareLinkDialog)
Vue.use(LinkedBot)
Vue.use(renDeptTree)
Vue.use(renRegionTree)
Vue.use(renProcessMultiple)
Vue.use(renProcessStart)
Vue.use(renProcessRunning)
Vue.use(renProcessDetail)

Vue.use(SelectTeamId)

Vue.use(SelectClientUserInfo)
Vue.use(LinkedDataset)
Vue.use(EllipsisVessel)
Vue.use(EllipsisVesselHeight)

Vue.prototype.$http = http
Vue.prototype.$elmess = alertMessage
Vue.prototype.$hasPermission = hasPermission
Vue.prototype.$hasPermissionRouterName = hasPermissionRouterName
Vue.prototype.$getDictLabel = getDictLabel
Vue.prototype.$interface = apiInterface
Vue.prototype.$ossLink = 'https://app.maibozhineng.com/oss'
Vue.prototype.$getQuery = getQuery
Vue.use(Empty)

const RenderApp = () => (
  // <PayProvider>
  //   <App />
  // </PayProvider>
   <App />
)

Vue.directive('onlyClone', function (el, binding) {
  if (binding.value) {
    const data = binding.value
    if (
      router.currentRoute.path.includes('/bot-') &&
      data.type &&
      data.type === 100101 &&
      (data.shareTenantCode !== store.state.user.tenantCode || data.hide)
    ) {
      el.remove()
    }
    if (
      router.currentRoute.path.includes('/bot-') &&
      data.businessType &&
      data.businessType === 'Template' &&
      data.tenantCode !== store.state.user.tenantCode
    ) {
      el.remove()
    }
  }
})

const vueClearIndex = {
  install: Vue => {
    Vue.directive('delTabIndex', {
      bind(el, binding) {
        el.__vueSetTimeoutIndex__ = setTimeout(() => {
          el.removeAttribute('tabindex')
          clearTimeout(el.__vueSetTimeoutIndex__)
        }, 0)
      },
      unbind(el) {
        clearTimeout(el.__vueSetTimeoutIndex__)
      }
    })
  }
}
vueClearIndex.install(Vue)

Vue.use(Element, {
  size: 'default',
  i18n: (key, value) => i18n.t(key, value)
})
Vue.use(FormMaking, {
  lang: 'zh-CN',
  i18n, 
  components: [{
    name: 'custom-form-select-search',
    component: CustomComponent
  },
  {
    name:'custom-form-select-all-search',
    component: CustomAllComponent
  },
  {
    name: 'custom-form-signature-pad',
    component: CustomSignaturePad
  },
  {
    name: 'custom-form-image-upload',
    component: CustomImageUpload
  }
]
})
Vue.use(VueVirtualScroller)
Vue.use(PortalVue)
Vue.use(VJsoneditor)
Vue.use(VueQuillEditor)
Vue.use(window['vue-cropper'].default)

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.prototype.$showErrorWithAssetList = showErrorWithAssetList


Vue.prototype._ = _

new Vue({
  i18n,
  router,
  store,
  render: h => h(RenderApp),
  data: {
    eventBus: bus
  }
}).$mount('#app')

if (sessionStorage.getItem('store')) {
  // store.replaceState(
  //   Object.assign({},
  //     store.state.contentTabs,
  //     JSON.parse(sessionStorage.getItem('store'))
  //   )
  // )
  store.state.contentTabs = JSON.parse(sessionStorage.getItem('store'))
  sessionStorage.removeItem('store')
}
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('store', JSON.stringify(store.state.contentTabs))
})
